<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <style>
      ul,
      ol {
        list-style: none;
        padding: 0px;
        margin: 0px;
      }

      #main {
        width: 600px;
        height: 350px;
        margin: 30px auto;
        position: relative;
      }

      #display {
        width: 600px;
        height: 350px;
        overflow: hidden;
        position: relative;
        -webkit-user-select: none;
      }

      #display ul {
        position: relative;
        left: 0;
        top: 0px;
        width: 3600px;
        height: 350px;
        transition: left 500ms linear;
      }

      #list li {
        float: left;
        width: 600px;
        height: 350px;
      }

      #arrow {
        display: none;
      }

      #arrow span {
        position: absolute;
        width: 40px;
        height: 40px;
        line-height: 40px;
        left: 5px;
        top: 50%;
        margin-top: -20px;
        background: #000;
        cursor: pointer;
        text-align: center;
        font-weight: bold;
        font-family: 黑体, SimHei;
        font-size: 30px;
        color: #fff;
        opacity: 0.4;
        border: 1px solid #fff;
        -webkit-user-select: none;
      }

      #arrow span:hover {
        opacity: 0.7;
      }

      #arrow #right {
        right: 5px;
        left: auto;
      }

      #index_container {
        position: absolute;
        width: 210px;
        height: 30px;
        right: 20px;
        bottom: 20px;
      }

      #index_container .index {
        float: left;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        opacity: 0.8;
        background: #fff;
        border: 1px solid #ccc;
        margin-left: 10px;
        cursor: pointer;
        -webkit-user-select: none;
      }

      #index_container .current {
        background: #ec3d3d;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <div id="display">
        <ul id="list">
          <li>
            <img src="img/wallhaven-y8622k.jpg" width="600" height="350" />
          </li>
          <li>
            <img src="img/wallhaven-y8622k.jpg" width="600" height="350" />
          </li>
          <li>
            <img src="img/wallhaven-y8622k.jpg" width="600" height="350" />
          </li>
          <li>
            <img src="img/wallhaven-y8622k.jpg" width="600" height="350" />
          </li>
          <li>
            <img src="img/wallhaven-y8622k.jpg" width="600" height="350" />
          </li>
        </ul>
        <ol id="index_container"></ol>
        <div id="arrow">
          <span id="left" title="前一张"><</span>
          <span id="right" title="后一张">></span>
        </div>
      </div>
    </div>

    <script>
      window.onload = () => {
        let list = document.getElementById("list");
        let ol = document.getElementsByTagName("ol")[0];
        let display = document.getElementById("display");
        let currentIndex = 0;
        let autoPlay = () => {
          window.autoPlay = true;
        //   window.autoPlayTimer = setInterval(
        //     () => move((currentIndex + 1) % 5),
        //     2000
        //   );
        };
        let stopPlay = () => {
          if (window.autoPlay) {
            window.autoPlay = false;
            clearInterval(window.autoPlayTimer);
          }
        };
        //创建索引按钮
        for (let i = 0; i < 5; i++) {
          let li = document.createElement("li");
          li.textContent = String(i + 1);
          li.className = "index";
          if (i == 0) li.className += " current";
          li.index = i;
          ol.appendChild(li);
          li.addEventListener("mouseover", function () {
            move(this.index);
            stopPlay();
          });
        }
        let arrow = document.getElementById("arrow");
        let showArrow = () => (arrow.style.display = "block");
        let hideArrow = () => (arrow.style.display = "none");
        //核心move函数
        let move = (index) => {
          let width = display.offsetWidth;
          for (let i = 0; i < 5; i++) {
            //改变当前索引按钮
            if (index % 5 === i) {
              ol.children[i].className = "index current";
            } else ol.children[i].className = "index";
          }
          //移动lists
          console.log(-index * width);
          list.style.left = -index * width + "px";
          currentIndex = index;
        };
        display.addEventListener("mouseover", showArrow);
        display.addEventListener("mouseleave", () => {
          hideArrow();
          if (!window.autoPlay) {
            //重新开始自动播放
            autoPlay();
          }
        });

        let left = document.getElementById("left");
        let right = document.getElementById("right");
        left.addEventListener("click", () => {
          move(currentIndex - 1 === -1 ? 4 : currentIndex - 1);
          stopPlay();
        });
        right.addEventListener("click", () => {
          move((currentIndex + 1) % 5);
          stopPlay();
        });

        //启动自动播放
        move(0);
        autoPlay();
      };
    </script>
  </body>
</html>
